<!DOCTYPE html>

<html>

<head>
  <title>Example 04.01 - MeshBasicMaterial</title>
  <script type="text/javascript" src="../libs/three.js"></script>

  <script type="text/javascript" src="../libs/stats.js"></script>
  <script type="text/javascript" src="../libs/dat.gui.js"></script>
  <script type="text/javascript" src="../libs/CanvasRenderer.js"></script>
  <script type="text/javascript" src="../libs/Projector.js"></script>
  <style>
    body {
      /* set margin to 0 and overflow to hidden, to go fullscreen */
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="webgl">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {
        var scene = new THREE.Scene()

        var webglrenderer = new THREE.WebGLRenderer()
        webglrenderer.setSize(window.innerWidth, window.innerHeight)
        webglrenderer.setClearColor(0xeeeeee,1)
        webglrenderer.shadowMapEnabled = true
        var canvasrenderer = new THREE.CanvasRenderer()
        canvasrenderer.setSize(window.innerWidth, window.innerHeight)
        var renderer = webglrenderer

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.set(-20,40,30)
        camera.lookAt(scene.position)

        var planeGeometry = new THREE.PlaneGeometry(100,100,4,4)
        var planeMaterial = new THREE.MeshBasicMaterial({color:0x777777})
        var plane = new THREE.Mesh(planeGeometry, planeMaterial)
        plane.rotation.x = -0.5 *Math.PI
        plane.position.set(0,-20,0)
        scene.add(plane)

        var sphereGeometry = new THREE.SphereGeometry(14,20,20)
        var cubeGeometry = new THREE.BoxGeometry(15,15,15)
        var plane1Geometry =new THREE.PlaneGeometry(14,14,4,4)
        var meshMaterial = new THREE.MeshBasicMaterial({color:0x7777ff,side:THREE.DoubleSide})
        var sphere = new THREE.Mesh(sphereGeometry, meshMaterial)
        var cube = new THREE.Mesh(cubeGeometry, meshMaterial)
        var plane1 = new THREE.Mesh(plane1Geometry, meshMaterial)
        sphere.position.set(0,3,2)
        cube.position.copy(sphere.position)
        plane1.position.copy(sphere.position)
        scene.add(cube)
        // scene.add(plane1)
        // scene.add(sphere)

        var ambientLight = new THREE.AmbientLight(0x0c0c0c)
        scene.add(ambientLight)
        var spotLight = new THREE.SpotLight(0xffffff)
        spotLight.position.set(-40,60,-10)
        spotLight.castShadow = true
        scene.add(spotLight)


        var speed = 0.02

        var controls = new function(){
            this.selectedMesh = 'cube'
            this.switchRenderer = function(){
                if(renderer instanceof THREE.WebGLRenderer){
                    document.getElementById('webgl').removeChild(renderer.domElement)
                    renderer = canvasrenderer
                    document.getElementById("webgl").appendChild(renderer.domElement);
                } else {
                    document.getElementById('webgl').removeChild(renderer.domElement)
                    renderer = webglrenderer
                    document.getElementById("webgl").appendChild(renderer.domElement);
                }
            }
        }
        var gui = new dat.GUI()
        gui.add(controls, 'selectedMesh',['cube','plane1','sphere']).onChange(function(e){
            scene.remove(plane1)
            scene.remove(cube)
            scene.remove(sphere)
            switch (e) {
                case 'cube':
                    scene.add(cube)
                    break
                case 'plane1':
                    scene.add(plane1)
                    break
                case 'sphere':
                    scene.add(sphere)
                    break
            }

            // scene.add(e)
        })
gui.add(controls,'switchRenderer')

        function renderAnimation(){
            sphere.rotation.y += speed
            cube.rotation.y += speed
            plane1.rotation.y += speed

            requestAnimationFrame(renderAnimation)
            renderer.render(scene, camera)
        }
        document.getElementById('webgl').appendChild(renderer.domElement)
        renderAnimation()



    }

    window.onload = init
</script>
</body>
</html>
